<script setup lang="ts">
// props vue3+js的写法
// defineProps({
//   money: {
//     type: Number,
//     required: true
//   },
//   car: {
//     type: String,
//     required: false,
//     default: '法拉利'
//   }
// })
// props vue3+ts写法
// defineProps<{
//   money: number
//   car?: string
// }>()

// ts给props设置默认值
// withDefaults(defineProps<{
//   money: number
//   car?: string
// }>(), {
//   car: '法拉利'
// }) 

// 默认值简单写法 需要配置vite.config.ts
const {money, car = '法拉利'} = defineProps<{
  money: number
  car?: string
}>()

// emit的vue3+js 
// const emit = defineEmits(['changeMoney', 'changeCar'])

// emit 的vue3 + ts
const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()

const changeMoney = () => {
  emit('changeMoney', 10)
}

const changeCar = () => {
  emit('changeCar', '宝马')
}

</script>

<template>
  <div class="child-page">
    child
    <p>钱: {{money}} --- 车: {{car}}</p>
    <button @click="changeMoney">花钱</button>
    <button @click="changeCar">换车</button>
  </div>
</template>

<style lang="scss" scoped></style>
